:root{
    --with: 300px;
    --parameter: 3s ease-in-out infinite;
}
body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

#content {
    width: var(--with);
    height: 300px;
    position: relative;
}

img{
    position: absolute;
    display: block;
    width: 100%;
}

.code-scan {
    overflow: hidden;
    clip:rect(0px var(--with) 0px 0px);
    animation: scaning var(--parameter);
}

@keyframes scaning{
    0%{
        clip:rect(0px var(--with) 0px 0px);
    }50%{
        clip:rect(0px var(--with) 300px 0px);
    }100%{
        clip:rect(0px var(--with) 0px 0px);
    }
}

.solid{
    position: absolute;
    width: var(--with);
    height: 8px;
    z-index: 99;
    border-radius: 15px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    background-color: #0054a5;
    animation: scan_solid var(--parameter);

}

@keyframes scan_solid{
    0%{
        top: 0px;
    }50%{
        top: 100%;
    }100%{
        top: 0px;
    }
}